<!DOCTYPE html>
<html lang="zh_CN" xmlns:th="http://www.thymeleaf.org"
      xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head>
    <meta charset="UTF-8">
    <title>文件上传</title>

    <script th:src="@{/static/js/jquery.min.js?v=2.1.4}"></script>
    <link th:href="@{/static/css/plugins/uploadifive/uploadifive.css}" rel="stylesheet" />
    <script th:src="@{/static/js/plugins/uploadifive/jquery.uploadifive.js}" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="pro">

</div>
<hr>
<form id="test">
    <input name="username" value="123123123">
    <input name="pass" value="123123123">

</form>
  <input type="file" id="uploadify"/>
<button onclick="up()" class="">啥青川</button>
</body>
<script type="text/javascript" th:inline="javascript">
    function up() {
        console.log(":123213");
//        var r = $('#test').serialize();
//        console.log(r);
        $('#uploadify').data('uploadifive').settings.formData ={'username':123} ;   //动态更改formData的值
        $('#uploadify').uploadifive('upload');
    }



    /*<![CDATA[*/
    var s = /*[[@{/dorm/upload/upload}]]*/;
    /*]]>*/
    $(function(){
        $('#uploadify').uploadifive({
            uploadScript: s,	// 服务器端处理地址
            width: 100,                          // 按钮的宽度
            height: 23,                         // 按钮的高度
            buttonText: "导入EXCEL",                 // 按钮上的文字
            buttonCursor: 'cursor',                // 按钮的鼠标图标
            fileObjName: 'fileData',			// 上传参数名称
            successTimeout: 6000,
            removeCompleted:false,//上传完成之后移除
//            formData:,
            queueID:'pro',
            // 两个配套使用
            fileType: ".xlsx",             // 扩展名
//            fileSizeLimit:'20KB',
            auto: false,                // 选择之后，自动开始上传
            multi: false,               // 是否支持同时上传多个文件
            queueSizeLimit: 1,          // 允许多文件上传的时候，同时上传文件的个数
            onUploadComplete : function(file, data, response) {
                data = $.parseJSON(data);
                console.log(data)
            },
            onAddQueueItem:function (file) {
                //添加之前从队列移除
                $('#uploadify').uploadifive("clearQueue");
            },
            onProgress:function (file, e) {
                if (e.lengthComputable) {
                    var percent = Math.round((e.loaded / e.total) * 100);
                }
                file.queueItem.find('.fileinfo').html(' - ' + percent + '%');
                file.queueItem.find('.progress-bar').css('width', percent + '%');
            }
        });

    });

</script>
</html>